<template>
  <div v-loading="loading">
    <el-main>
      <el-card>
        <el-button type="primary" size="mini" @click="handleGoBack">返回</el-button>
        <el-select v-model="status" placeholder="请选择上课状态" style="margin-left: 30px" clearable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button circle type="primary" icon="el-icon-search" @click="defaultData()" />
        <el-button type="success" icon="el-icon-download" @click="handleExportCompanyStudy()">导出全部</el-button>
        <span style="color: red;">*</span><span style="color: #8a8f97">可根据状态筛选进行导出</span>
        <el-table :data="list">
          <el-table-column prop="chapter_name" label="课程名称" align="center" />
          <el-table-column prop="name" label="学员名称" align="center" />
          <el-table-column prop="company" label="公司名称" align="center" />
          <el-table-column prop="job" label="职位" align="center" />
          <el-table-column prop="status" label="上课状态" align="center">
            <template slot-scope="scope">
              {{
                scope.row.status == 1 ? '待上课' : scope.row.status == 2 ? '已上课' : '取消'
              }}
            </template>
          </el-table-column>
          <el-table-column prop="date" label="上课时间" align="center" />
          <el-table-column prop="create_time" label="报名时间" align="center" />
        </el-table>
      </el-card>
    </el-main>
    <el-footer style="height: 85px">
      <el-card>
        <el-pagination
          style="text-align: center;"
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-footer>
  </div>
</template>

<script>
import { companyRecord, exportCompanyStudy } from '@/api/otherAPI.js'
export default {
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 20,
      total: 0,
      options: [
        { label: '待上课', value: 1 },
        { label: '已上课', value: 2 },
        { label: '已取消', value: 3 }
      ],
      status: '',
      loading: false
    }
  },
  mounted() {
    this.defaultData()
  },
  methods: {
    defaultData() {
      this.loading = true
      companyRecord({
        company_id: this.$route.query.company,
        page: this.page,
        pageSize: this.pageSize,
        status: this.status
      }).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.page = res.data.pagination.page
          this.pageSize = res.data.pagination.pageSize
          this.total = res.data.pagination.total
        }
        this.loading = false
      })
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.defaultData()
    },
    handleCurrentChange(page) {
      this.page = page
      this.defaultData()
    },
    handleGoBack() {
      this.$router.push({ path: './cooperation' })
    },
    handleExportCompanyStudy() {
      window.open(process.env.VUE_APP_BASE_API + '/admin/user/export/company/study?status=' + this.status + '&company=' + this.$route.query.company)
      // this.loading = true
      // exportCompanyStudy({
      //   status: this.status,
      //   company: this.$route.query.company
      // }).then(res => {
      //   if (res.code == 200) {
      //     this.$message.success('导出成功')
      //   } else {
      //     this.$message.error('导出失败')
      //   }
      //   this.loading = false
      // }).catch((err) => {
      //   console.log(err)
      //   this.loading = false
      // })
    }
  }
}
</script>
